<template>
    <div class='myapp'>
      <canvas ref="cvs" width="1000" height="600" style="border: 1px solid #000;">

      </canvas>
    </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue'
import gridMain from '../js/gridMain'
import gridLine from '../js/girdLine';
import Feature from '../js/features'

let cvs = ref()

onMounted(() => {
  let gm = new gridMain(cvs.value)
  let gl = new gridLine(gm)
  const triangle = [
    {x:100,y:100},
    {x:50,y:150},
    {x:150,y:150},
  ]
  let feature = new Feature(triangle)
  gm.addFeature(feature)
  gm.draw()
  gl.draw()
})

</script>

<style lang="less" scoped>
.myapp {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>